<template>
  <div class="hello">
    <x-header title="需求xxx"></x-header>
    <tab>
      <tab-item selected @on-item-click="onItemClick">详情</tab-item>
      <tab-item @on-item-click="onItemClick">排期</tab-item>
      <tab-item @on-item-click="onItemClick">会签</tab-item>
    </tab>
    <div v-if="tabIndex == 0">
      <group label-width="4em" label-margin-right="1em" label-align="right">
        <cell
          title="需求标题"
          is-link
          :border-intent="false"
          :arrow-direction="showContent004 ? 'up' : 'down'"
          @click.native="showContent004 = !showContent004"
        ></cell>
        <p class="slide" :class="showContent004 ? 'animate' : ''">
          {{ reqForm.title }}
        </p>
      </group>

      <group>
        <cell
          title="审批人"
          :value="reqForm.signManName"
          @click.native="onClick"
        ></cell>
      </group>

      <div v-transfer-dom class="my-pop">
        <popup v-model="popup" position="bottom" max-height="70%">
          <ul class="org-ui">
            <li class="org-li vux-1px-b" v-for="org in orgs" :key="org.orgId">
              <div class="org-item">
                <p class="org-name" @click="selectPerson(org.orgId)">
                  {{ org.orgName }}
                </p>
                <p
                  class="org-sub"
                  @click="nextOrg(org.orgId)"
                  v-show="org.subOrg && org.subOrg.length > 0"
                >
                  >
                </p>
              </div>
              <div
                class="org-person-list"
                v-if="org.showPerson && org.staff && org.staff.length > 0"
              >
                <group>
                  <radio
                    :options="org.staff"
                    @on-change="change"
                    v-model="reqForm.signMan"
                  ></radio>
                </group>
              </div>
            </li>
          </ul>
          <div style="padding: 15px">
            <x-button @click.native="popup = false" plain type="primary">
              Close Me
            </x-button>
          </div>
        </popup>
      </div>
    </div>
    <div v-if="tabIndex == 1">1</div>
    <div v-if="tabIndex == 2">2</div>
    <div></div>
    <div></div>
  </div>
</template>

<script>
import { Tab, TabItem, XHeader, Group, Cell, CellBox, Radio, XSwitch, TransferDom, Popup, XButton } from 'vux';
export default {
  directives: {
    TransferDom
  },
  components: {
    Tab,
    TabItem,
    XHeader,
    Group,
    Cell,
    CellBox,
    Radio,
    XSwitch,
    Popup,
    XButton
  },
  name: 'HelloWorld',
  data() {
    return {
      msg: 'Welcome to Your Vue.js App',
      tabIndex: 0,
      reqForm: {
        title: "1111111111111111111111111111111111中信需求22222222222222222222222222222",
        id: "RE_123",
        signMan: "",
        signManName: ""
      },
      popup: false,
      showContent004: false,
      orgs: [

      ],
      orgs1: [
        {
          orgId: 1,
          orgName: "机构1",
          staff: [{
            key: '001',
            value: '麻槐德'
          }, {
            key: '002',
            value: '赵恒晨'
          }],
          subOrg: [{
            orgId: 11,
            orgName: "子机构1",
            staff: [{
              key: '003',
              value: '王天龙'
            }, {
              key: '004',
              value: '吴泽妃'
            }]
          }],
        },
        {
          orgId: 2, orgName: "机构2", subOrg: [{ orgId: 21, orgName: "子机构2", }], staff: [{
            key: '005',
            value: '袁鑫'
          }, {
            key: '006',
            value: '田浩'
          }]
        },
        {
          orgId: 3, orgName: "机构3", subOrg: [{ orgId: 31, orgName: "子机构3", }], staff: [{
            key: '007',
            value: '赵维东'
          }, {
            key: '008',
            value: '王鹏飞'
          }]
        },
        { orgId: 4, orgName: "机构4" },
        { orgId: 5, orgName: "机构5", subOrg: [{ orgId: 51, orgName: "子机构5", }], },
        { orgId: 6, orgName: "机构6", subOrg: [{ orgId: 61, orgName: "子机构6", }], },
        { orgId: 7, orgName: "机构7", subOrg: [{ orgId: 71, orgName: "子机构7", }], },
        { orgId: 8, orgName: "机构8", subOrg: [{ orgId: 81, orgName: "子机构8", }], },
        { orgId: 9, orgName: "机构9", subOrg: [{ orgId: 91, orgName: "子机构9", }], },
        { orgId: 10, orgName: "机构10", subOrg: [{ orgId: 101, orgName: "子机构10", }], },
        { orgId: 11, orgName: "机构11", subOrg: [{ orgId: 111, orgName: "子机构11", }], },
        { orgId: 12, orgName: "机构12", subOrg: [{ orgId: 121, orgName: "子机构12", }], },
        { orgId: 13, orgName: "机构13", subOrg: [{ orgId: 131, orgName: "子机构13", }], },
        { orgId: 14, orgName: "机构14", subOrg: [{ orgId: 141, orgName: "子机构14", }], },
        { orgId: 15, orgName: "机构15", subOrg: [{ orgId: 151, orgName: "子机构15", }], },
        { orgId: 16, orgName: "机构16", subOrg: [{ orgId: 161, orgName: "子机构16", }], },
        { orgId: 17, orgName: "机构17", subOrg: [{ orgId: 171, orgName: "子机构17", }], },
        { orgId: 18, orgName: "机构18", subOrg: [{ orgId: 181, orgName: "子机构18", }], },
      ]
    }
  },
  computed: {
    showPersonName() {
      let personName = "";
    }
  },
  methods: {
    onItemClick(index) {
      this.tabIndex = index;

    },
    onClick() {
      this.popup = !this.popup;
      this.orgs = Object.assign(this.orgs1);
    },
    nextOrg(orgId) {
      console.log("org")
      this.findSubOrg(this.orgs, orgId)
    },
    selectPerson(orgId) {
      console.log("person");
      this.showPersonByOrgId(this.orgs, orgId);
    },
    showPersonByOrgId(list, orgId) {
      list.forEach(org => {
        this.$set(org, "showPerson", false);
        if (org.orgId == orgId) {
          this.$set(org, "showPerson", true);
        } else if (org.subOrg && org.subOrg.length > 0) {
          this.showPersonByOrgId(org.subOrg, orgId)
        }
      });
    },

    // 寻找
    findSubOrg(list, orgId) {
      list.forEach(org => {
        if (org.orgId == orgId) {
          this.orgs = org.subOrg;
        } else if (org.subOrg && org.subOrg.length > 0) {
          this.showPersonByOrgId(org.subOrg, orgId)
        }
      });
    },
    change(value, label) {
      this.reqForm.signManName = label;
    },
  },
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="less" scoped>
@rem: 750px / 16rem;
.hello {
  .header {
    width: 100%;
    height: 80 / @rem;
    background-color: #fff;

    .logo {
      width: 100 / @rem;
      height: 100%;
    }
    .title {
      width: 650 / @rem;
      height: 100%;
    }
  }
}
.slide {
  padding: 0 15px;
  overflow: hidden;
  font-size: 14px;
  color: gray;
  max-height: 0;
  transition: max-height 0.5s cubic-bezier(0, 1, 0, 1) -0.1s;
}
.animate {
  max-height: 9999px;
  transition-timing-function: cubic-bezier(0.5, 0, 1, 0);
  transition-delay: 0s;
}
</style>
<style lang="less">
.my-pop {
  .org-ui {
    .org-li {
      padding: 0 5px;
      .org-item {
        height: 40px;
        line-height: 40px;
        display: flex;
        .org-name {
          display: inline-block;
          flex: 9;
        }
        .org-sub {
          display: inline-block;
          text-align: center;
          flex: 1;
        }
      }
      .org-person-list {
        box-sizing: border-box;
        // background-color: #ddd;
        padding: 0 0 20px 0;
      }
    }
  }
}
</style>>
